<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>任务队列页面</title>
    <link rel="stylesheet" href="/bootstrap/bootstrap.min.css">
    <script src="/jquery/jquery-3.5.1.min.js"></script>
    <script src="/bootstrap/bootstrap.min.js"></script>
    <script src="/sweetalert2-11.12.2/sweetalert2@11.js"></script>
    <style>
        /* 自定义样式 */
        body {
            background-color: #f8f9fa;
            padding-top: 40px; /* 顶部间距 */
        }

        .section-title {
            margin: 20px 0;
            font-size: 24px;
            font-weight: bold;
            text-align: center;
        }

        .select-table {
            margin-top: 20px;
        }

        .status-label {
            font-weight: bold;
            padding: 5px;
            border-radius: 5px;
        }

        .task-section {
            background-color: white;
            border-radius: 8px;
            padding: 20px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            margin-bottom: 30px;
            overflow: auto; /* 确保内容不溢出 */
        }

        table th, table td {
            padding: 12px; /* 增加单元格内边距 */
            text-align: center; /* 居中对齐 */
            vertical-align: middle; /* 垂直居中对齐 */
            white-space: nowrap; /* 防止文字换行 */
        }

        .container {
            max-width: 100%;
        }

        .row {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between; /* 确保两个任务部分之间有足够的间距 */
        }

        .col-lg-6 {
            /*flex: 0 0 48%; 确保每个部分占据一半的宽度并有一定的间距 */
            flex: 0 0 50%; /* 确保每个部分占据一半的宽度并有一定的间距 */
            margin-bottom: 30px; /* 增加垂直间距 */
        }
    </style>
</head>
<body>
<div class="container">
    <div class="row">
        <!-- 训练任务部分 -->
        <div class="col-lg-6">
            <div class="task-section">
                <div class="section-title">待执行队列</div>
                <div class="select-table table-striped">
                    <table id="bootstrap-table-training" class="table table-bordered" data-mobile-responsive="true">
                        <thead>
                        <tr>
                            <th>队列位次</th>
                            <th>任务名称</th>

                            <th>任务类型</th>
                            <th>任务ID</th>
                            <th>入队时间</th>


                        </tr>
                        </thead>
                        <tbody id="trainingTaskBody">
                        <!-- AJAX 请求返回的数据将填充到这里 -->
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

<!--        &lt;!&ndash; 识别任务部分 &ndash;&gt;-->
<!--        <div class="col-lg-6">-->
<!--            <div class="task-section">-->
<!--                <div class="section-title">识别任务</div>-->
<!--                <div class="select-table table-striped">-->
<!--                    <table id="bootstrap-table-inference" class="table table-bordered" data-mobile-responsive="true">-->
<!--                        <thead>-->
<!--                        <tr>-->
<!--                            <th>序号</th>-->
<!--                            <th>识别任务名称</th>-->
<!--                            <th>归属用户</th>-->
<!--                            <th>入队时间</th>-->
<!--                            <th>状态</th>-->
<!--                        </tr>-->
<!--                        </thead>-->
<!--                        <tbody id="inferenceTaskBody">-->
<!--                        &lt;!&ndash; AJAX 请求返回的数据将填充到这里 &ndash;&gt;-->
<!--                        </tbody>-->
<!--                    </table>-->
<!--                </div>-->
<!--            </div>-->
<!--        </div>-->
    </div>
</div>
<div th:include="include :: footer"></div>

<script>
    $(document).ready(function() {
        loadAllTasks();

    });

    function loadAllTasks() {
        // loadInferenceTasks();
        loadTrainingTasks();
    }

    function loadTrainingTasks() {
        $.ajax({
            url: '/deep_learning/taskQueue/getWaitAndTrainingList', // 替换为实际的后端接口
            method: 'GET',
            success: function(response) {
                const tbody = $('#trainingTaskBody');
                tbody.empty();
                let rowIndex = 1; // 行号计数器
                response.forEach(task => {
                    // const statusLabel = getStatusLabel(task.status);
                    // const userColor = getColorFromString(task.userName);
                    tbody.append(`<tr>
                        <td>${rowIndex++}</td>
                        <td>${task.taskName}</td>
                        <td>${task.taskType}</td>
                        <td>${task.taskID}</td>
                        <td>${task.inTime}</td>
                    </tr>`);
                });
            },
            error: function(error) {
                console.error('获取训练任务失败', error);
            }
        });
    }

    function loadInferenceTasks() {
        $.ajax({
            url: '/deep_learning/taskQueue/getWaitAndPredictList', // 替换为实际的后端接口
            method: 'GET',
            success: function(response) {
                const tbody = $('#inferenceTaskBody');
                tbody.empty();
                let rowIndex = 1; // 行号计数器
                response.forEach(task => {
                    const statusLabel = getStatusLabel(task.status);
                    const userColor = getColorFromString(task.userName);
                    tbody.append(`<tr>
                        <td>${rowIndex++}</td>
                        <td>${task.predictName}</td>
                        <td style="color: ${userColor}">${task.userName}</td>
                        <td>${task.timeToQueue}</td>
                        <td>${statusLabel}</td>
                    </tr>`);
                });
            },
            error: function(error) {
                console.error('获取识别任务失败', error);
            }
        });
    }

    function getStatusLabel(status) {
        let statusText = '';
        let color = '';
        switch (status) {
            case '未训练':
            case '未识别':
                statusText = status;
                color = 'gray';
                break;
            case '待训练':
            case '待识别':
                statusText = status;
                color = 'orange';
                break;
            case '训练中':
            case '识别中':
                statusText = status;
                color = 'blue';
                break;
            case '已完成':
                statusText = status;
                color = 'green';
                break;

            default:
                statusText = status.includes('异常') ? '训练异常' : '识别异常';
                color = 'red';
                break;
        }
        return `<span class="status-label" style="color: ${color};">${statusText}</span>`;
    }

    function getColorFromString(str) {
        // 创建一个哈希值并使用它来生成颜色
        let hash = 0;
        for (let i = 0; i < str.length; i++) {
            hash = str.charCodeAt(i) + ((hash << 5) - hash);
        }
        let color = '#';
        for (let i = 0; i < 3; i++) {
            color += ('00' + ((hash >> (i * 8)) & 0xFF).toString(16)).slice(-2);
        }
        return color;
    }
</script>
</body>
</html>
